import Vue from 'vue'
// 1. 下载 并导入路由类
import VueRouter from 'vue-router'
// 导入组件
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'
import Welcome from '@/components/Welcome.vue'
import User from '@/components/User/User.vue'
import Rights from '@/components/Rights/Rights.vue'
import Roles from '@/components/Rights/roles.vue'

// 2.全局注册路由组件标签
Vue.use(VueRouter)

// 3.创建路由规则
const routes = [{
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home,  
    redirect: '/welcome',
    children: [{
        path: '/welcome',
        component: Welcome
      },
      {
        path: '/users',
        component: User
      },
      {
        path: '/rights',
        component: Rights
      },
      {
        path: '/roles',
        component: Roles
      },
    ]
  }
]

// 4.创建 并 导出 路由管理器 对象
// export default new VueRouter({ routes })

// 4.创建 路由管理器 对象
const router = new VueRouter({
  routes
})

// 5.添加 路由守卫  每当hash 改变 都会先执行此方法
router.beforeEach((to, from, next) => {
  // 如果 访问 /login 直接放行
  if (to.path === '/login') return next()
  // 如果不是访问 /login 则检查 sessionStorage 中是否有token
  // if(window.sessionStorage.getItem('token'))
  const token = window.sessionStorage.getItem('token')
  // 如果没有,强制跳转至login页面
  if (!token) return next('/login')
  // 如果访问 非 /login 并且有token 直接放行
  next(true)
})
// 6.导出路由管理对象
export default router
